<template>
  <div class="donation">
    <div class="d-header"><span class="head-t">单笔捐赠</span><span class="tip">一份爱心，一份温暖</span><i class="close-icon" @click="close()"></i></div>
    <div class="select-points">
      <table cellspacing="10px">
        <tr>
          <td v-for="(item, index) in selectList" :key="index" @click="selectPoints(index)" :class="{select: selectIndex == index}">{{item}}积分</td>
        </tr>
      </table>
    </div>
    <div class="points-input"><input type="number" placeholder="自定义积分" v-model="points" @focus="selectIndex = -1"></div>
    <div class="rule">查看<span>《恒喆爱心捐助协议》</span></div>
    <div class="agree" @click="donation()">同意协议并捐赠</div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { ToastPlugin } from 'vux'
  import axios from 'axios'
  Vue.use(ToastPlugin)

  export default {
    name: 'donation',
    data() {
      return {
        selectList: ['20','50','100','500'],
        selectIndex: 0,
        points: '20'
      }
    },
    methods: {
      close() {
        this.$emit('closeD')
      },
      selectPoints(index) {
        this.selectIndex = index;
        this.points = this.selectList[this.selectIndex];
      },
      donation() {
        if (window.DEBUGGING) {
          this.$emit('closeD',this.points);
        }
        let that = this;
        axios.post('/User/donatePoints',{
          points: that.points
        }).then((res) => {
          if(res.code == 200 ) {
            that.$emit('closeD',that.points);
            that.$vux.toast.text('捐赠成功', 'middle');
          }
        })
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';
  .donation {
    padding: 20px;
    box-sizing: border-box;
    .d-header {
      margin-bottom: 20px;
      >span {
        display: inline-block;
      }
      .head-t {
        font-weight: bold;
        margin-right: 12px;
        font-family: PingFangSC-Medium;
      }
      .tip {
        font-size: 11px;
        color: #999;
      }
      .close-icon {
        float: right;
        // display: inline-block;
        width: 16px;
        height: 16px;
        background-image: url(~IMGS/close-icon.png);
        background-size: 100%;
        background-repeat: no-repeat;
      }
    }
    .select-points {
      margin-bottom: 10px;
      >table>tr {
        >td {
          box-sizing: border-box;
          width: 75px;
          line-height: 30px;
          text-align: center;
          color: #f07d23;
          border: 1px solid #eee;
          &.select {
            border: 1px solid #F07D23;
          }
        }
      }
    }
    .points-input {
      margin-bottom: 30px;
      margin-left: 12px;
      >input {
        padding-left: 10px;
        width: 160px;
        height: 30px;
        border: 1px solid #eee;
      }
    }
    .rule {
      margin-bottom: 20px;
      font-size: 11px;
      color: #333;
      >span{color: #1e98ea;}
    }
    .agree {
      color: #fff;
      line-height: 44px;
      text-align: center;
      border-radius: 4px;
      background-color: #F7A011;
    }
  }
</style>


